<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 图标 -->
     <link rel="icon" href="/pic/聊天类.png" type="image/png" sizes="32x32">
    <title>主页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/home.css">
</head>
<body>
    <script src="js/vue.js"></script>
    <script src="js/dayjs.min.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- <script src="js/element/index.css"></script>
    <script src="js/element/index.js"></script> -->
   <style>
    /* 去除掉前面的原点 */
    .list{
        list-style-type: none;
    }
   </style>
    
     <!-- 背景 -->
     <div class="background-pic"></div>
     <!-- 页面框架 -->
       <div class="main-container">
        <!-- 中间框架 -->
        <div class="main">
            <!-- 会话列表 -->
           <div class="left">
               <!--用户信息  -->
               <div class="user" id="user">
                <!-- 头像 -->
                <img :src="avatarUrl" alt="用户头像" title="点击更换头像" @click="chooseAvatar">
                <h3 v-text="userName">zhangsan</h3>
                <input type="file" id="avatarFileInput" accept="image/*" style="display: none;" @change="handleAvatarChange">
                </div>

                
                <!-- 搜索框 -->
                 <div class="search" id="search">
                    <input type="text" v-model="input">
                    <button title="搜索用户"  @click="searchFriends"></button>
                 </div>
                  
                <!-- 选择标签 -->
                <div class="table">
                     <!--会话标签  -->
                     <div class="session-table" id="session-table" title="会话" @click="onclick"></div>
                     <!-- 好友标签 -->
                      <div class="friend-table" id="friend-table" title="好友" @click="onclick"></div>
                </div>
    
                 <!-- 会话,好友列表 -->
                  <!-- 会话列表 -->
                   <ul :class="class_name" id="session-list">
                        <li>
                            <img src="/pic/kun.jpg">
                            <div class="list-li">
                                <h3>lise</h3>
                                <p>干嘛</p>
                            </div>
                            <div id="unread" class="unread-hide" style="background-color:brown;"></div>
                        </li>
                        <!-- 当选中这个会话,会话一个处于高亮的选中状态 -->
                        <li class="selected">
                            <img src="/pic/kun.jpg">
                            <div class="list-li">
                                <h3>lise</h3>
                                <p>干嘛</p>
                            </div>
                        </li> 
                        <li>
                            <img src="/pic/kun.jpg">
                            <div class="list-li">
                                <h3>lise</h3>
                                <p>干嘛</p>
                            </div>
                        </li>
                        <li>
                            <img src="/pic/kun.jpg">
                            <div class="list-li">
                                <h3>lise</h3>
                                <p>干嘛</p>
                            </div>
                        </li>
                        <li>
                            <img src="/pic/kun.jpg">
                            <div class="list-li">
                                <h3>lise</h3>
                                <p>干嘛</p>
                            </div>
                        </li>
                        <li>
                            <img src="/pic/kun.jpg">
                            <div class="list-li">
                                <h3>lise</h3>
                                <p>干嘛</p>
                            </div>
                        </li>
                        <li>
                            <img src="/pic/kun.jpg">
                            <div class="list-li">
                                <h3>lise</h3>
                                <p>干嘛</p>
                            </div>
                        </li>
                        <li>
                            <img src="/pic/kun.jpg">
                            <div class="list-li">
                                <h3>lise</h3>
                                <p>干嘛</p>
                            </div>
                        </li>
                   </ul>
                  <!-- 好友列表 -->
                   <!-- hide 用于隐藏这个列表 -->
                  <ul :class="class_name" id="friend-list">
                    <li>
                        <img src="/pic/kun.jpg">
                        <div class="list-li">
                            <h4>lise</h4>
                        </div>
                    </li>
                    <li>
                        <img src="/pic/kun.jpg">
                        <div class="list-li">
                            <h4>lise</h4>
                        </div>
                    </li>
               </ul>
                 <div class="setting" id="setting">
                     <img :class='class_name'   title="设置" @click="onclick()">
                       <button  :class="but" @click="logout">注销</button>
                </div>
                </div>

           <!-- 主要聊天区域 -->
           <div class="right">
            <!-- 好友名字 -->
                 <div class="title" id="session-title">
                   <h3 v-text="title_name">李四</h3> 
                   <img id="deleteUser"  @click="deleteFriend" title="删除好友" >
                 </div>
            
                 
                 <!-- 历史消息聊天框 -->
                 <div class="message-show">
                    <!-- 一个消息一个message -->
                       <!--消息分左右, 方便区分自己和别人  -->
                      <div class="message message-left">
                           <!-- 消息块 -->
                            <!-- <div class="box">
                                <div class="user-img">
                                    <img>
                                </div>
                                 <div class="info">
                                    <h6>zhangsan</h6>
                                    <p>消息消息消息消息消息消息
                                        消息消息消息消息消息消息
                                        消息消息消息消息消息消息
                                    </p>
                                 </div>
                            </div> -->
                      </div>
                      <div class="message message-left">
                        <!-- 消息块 -->
                         <!-- <div class="box">
                             <div class="user-img">
                                 <img>
                             </div>
                             <div class="info">
                                <h6>zhangsan</h6>
                                <p>消息消息消息消息消息消息
                                    消息消息消息消息消息消息
                                    消息消息消息消息消息消息
                                </p>
                             </div>
                         </div> -->
                   </div>
                      <div class="message message-right">
                        <!-- 消息块 -->
                        <!-- <div class="box">
                                <div class="user-img">
                                    <img>
                                </div>
                                <div class="info">
                                    <h6>zhangsan</h6>
                                    <p>消息消息消息消息消息消息
                                        消息消息消息消息消息消息
                                        消息消息消息消息消息消息
                                    </p>
                                 </div>
                            </div> -->
                   </div>
                   <div class="message message-right">
                    <!-- 消息块 -->
                    <!-- <div class="box">
                            <div class="user-img">
                                <img>
                            </div>
                            <div class="info">
                                <h6>zhangsan</h6>
                                <p>消息消息消息消息消息消息
                                    消息消息消息消息消息消息
                                    消息消息消息消息消息消息
                                </p>
                             </div>
                        </div> -->
               </div>
                 </div>
                  
                 <!-- 输入框 -->
                  <textarea class="message-input" id="message-input" v-model="inputMessage">

                  </textarea>
                 <!-- 发送按钮 -->
                  <div class="send" id="send"  >
                     <button @click="onclick"> 发送</button>
                  </div>
           </div>
       </div>
       </div> 
         <script src="js/home.js"></script>
         <style scoped>
            #unread{
                margin-top: 5%;
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }  
         </style>
</body>
</html>